<template>
	<view class="applyr-for-refund">
		<!-- 申请退款 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">申请退款</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-sw po-re"
			style="background: #F0F1F5;"
			:style="{ height: containerHeight }"
		>
			<view style="padding:0 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
				<view class="d-flex flex-c b-box w-100" style="background: #F0F1F5;">
					<view
						style="height: 92rpx;border-bottom: 1rpx solid #eeeeee;padding: 0 32rpx;"
						class="w-100 b-box d-flex flex-r ali-i-c just-s bg-ff"
					>
						<text class="pf-sc fw-400 c-333 " style="font-size: 28rpx;">
							订单编号：{{ data.orderno }}
						</text>
					</view>
					<view
						style="min-height: 146rpx;padding: 0 32rpx;padding-top: 30rpx;"
						class=" b-box d-flex flex-r ali-i-c just-s bg-ff"
					>
						<view
							style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
							class="b-box"
						>
							<image :src="data.catimage" style="width:140rpx ;height:140rpx"></image>
						</view>
						<!--  -->
						<view
							style="width: 520rpx;height: 140rpx;"
							class="b-box d-flex flex-c ali-i-s just-s bg-ff"
						>
							<view class="d-flex flex-r ali-i-c just-sw b-box w-100" style="margin-bottom: 8rpx;">
								<text class="fw-500 pf-sc c-333 fz-32 text-ep-1" style="width: 300rpx;">
									{{ data.catname }}
								</text>
								<text
									class="fw-400 pf-sc po-re"
									style="color: #ED1D15;font-size: 28rpx;right: 4rpx;"
								>
									接单超时
								</text>
							</view>
							<view
								class="d-flex flex-c ali-i-s just-s b-box"
								style="min-height: 70rpx;width: inherit;padding-right: 26rpx;"
							>
								<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
									<text
										class="pf-sc fw-300"
										style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
									>
										{{ data.cardetail }}
									</text>
								</view>
								<view class="b-box d-flex flex-r ali-i-c just-s">
									<text class="pf-sc fw-500 po-re" style="font-size: 22rpx;color: #FF5C00;top:2rpx">
										¥
									</text>
									<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
										{{ data.money }}
									</text>
								</view>
							</view>
						</view>
						<!--  -->
					</view>
					<view
						style="height: 106rpx;padding: 0 32rpx;"
						class="w-100 b-box d-flex flex-r ali-i-c just-e bg-ff"
					>
						<view style="height: inherit;" class=" d-flex flex-r ali-i-c just-s">
							<text
								style="margin-right: 16rpx;font-size: 28rpx;color: #666666;"
								class="pf-sc fw-400 "
							>
								总价：¥{{ data.totalmoney }}
							</text>
							<text style="font-size: 28rpx;" class="pf-sc fw-500 c-333">
								实付款：￥{{ data.money }}
							</text>
						</view>
					</view>
				</view>
				<!--  -->
				<view
					class="w-750 b-box d-flex flex-r ali-i-c just-sw bg-ff"
					style="padding: 0 32rpx 0 36rpx;height: 112rpx;margin-top: 20rpx;"
				>
					<text class="pf-sc fw-400 " style="font-size: 30rpx;color: rgba(0,0,0,0.9000);">
						退款金额
					</text>
					<view class="d-flex flex-r ali-i-c just-s">
						<text
							class="pf-sc fw-500"
							style="margin-right: 4rpx;top:2rpx;font-size: 22rpx;color: #FF5C00;"
						>
							¥
						</text>
						<text class="pf-sc fw-500" style="top:2rpx;font-size: 32rpx;color: #FF5C00;">
							{{ data.money }}
						</text>
					</view>
				</view>
				<!--  -->
				<view
					class="w-750 b-box d-flex flex-c ali-i-s just-s bg-ff"
					style="padding: 0 32rpx 36rpx 36rpx;margin-top: 20rpx;margin-bottom: 60rpx;"
				>
					<text
						class="pf-sc fw-400 w-100"
						style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin: 24rpx 0 28rpx;"
					>
						退款原因
					</text>
					<view class="d-flex flex-r ali-i-c just-s">
						<u-textarea
							v-model="str"
							:customStyle="{ background: '#F8F8F8', width: '640rpx' }"
							placeholder="简单描述退款原因"
							border="none"
							height="192rpx"
						></u-textarea>
					</view>
				</view>
				<view class="w-750 b-box  d-flex flex-r ali-i-c just-c">
					<u-button
						:throttleTime="700"
						@click="Submit"
						:customStyle="{
							height: '88rpx',
							width: '670rpx',
							font: '400 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="提交"
					></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tuikuan } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import uTextarea from '../components/uview-ui/components/u-textarea/u-textarea';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
export default {
	components: {
		'u-textarea': uTextarea,
		'u-navbar': Unavbar
	},
	props: ['staffList'],
	data() {
		return {
			containerHeight: '',
			data: uni.getStorageSync('RefundMoney'),
			str: ''
		};
	},
	methods: {
		Submit() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.data.id,
				reason: this.str
			};
			tuikuan(params).then(res => {
				if (res.data.code === 1) {
					uni.showToast({
						title: '申请退款成功',
						icon: 'success',
						success() {
							setTimeout(() => {
								uni.navigateBack({});
							}, 1000);
						}
					});
				}
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.applyr-for-refund {
}
</style>
